<template>
    <div class="newest">

        <load-list 
        ref="list"
        v-model="tableData" 
        :search="pgData" 
        :action="`${$store.state.api.tbUrl}/opportunity/subscribelist.json`" 
        @queryEnd="afterQuery"
        >
            <template>
                <div 
                class="newest_item" 
                v-for="(item,index) in tableData" 
                :key="index" 
                v-czc="['商机人脉圈', '点击列表' , '最新列表', index, 'businessContact-list-newestList']"
                >
                    <items 
                        :item="item" 
                        :index="index" 
                        :isShow="item.isshow" 
                        @portraitsClick="portraitsClick" 
                        @noticeClick="noticeClick" 
                        @showDetail="showDetail"
                    ></items>
                </div>
            </template>

            <template slot="empty">
                <div class="noDate">
                    <!-- 未设置信息： -->
                    <div 
                    class="noTop" 
                    v-if="needToCompleteInfo"
                    >
                        <div class="noInner">
                            您有
                            <span class="hl">
                                {{permissionnum}}
                            </span>
                            次查看商机人脉的次数，立即补充个人信息，越精准的商机及人脉推送给您
                            <span 
                            class="noSpan" 
                            @click="openDialogSupply"
                            >
                                去设置
                            </span>
                        </div>
                    </div>

                    <!-- 设置信息后无数据的： -->
                    <div class="noTop" v-else>
                        <div class="noInner">
                            还未有合适您的商机及人脉，可主动联系专员，共同寻找匹配您的潜在商机！
                            <span>
                                联系专员 {{this.$store.state.config.tel}}
                            </span>
                        </div>
                    </div>
                </div>
            </template>
        </load-list>

    </div>
</template>

<script>
import { mapGetters, mapActions } from 'vuex';

import notice from '@/mixins/notice.js';
import LoadList from '@components/sys/load-list.vue';
import items from './items.vue'

export default {
    components: {
        LoadList,
        items,
    },
    mixins: [notice],
    props: {
        isLogin:{
            type: Boolean,
            default: true,
        },
        // 权限剩余次数
        permissionnum: {
            type: [Number, String],
            default: 0,
        },
        // 商机数
        businessnum: {
            type: [Number, String],
            default: 0,
        },
        // 人脉数
        possiblenum: {
            type: [Number, String],
            default: 0,
        },
    },
    data() {
        return {
            tableData: [],
            pgData: {
                sortorder: 'desc',
                sortname: 'publishtime',
                pagesize: 10,
            },

            permissionNum: 0,
        };
    },
    computed: {
        ...mapGetters({
            needToCompleteInfo: 'userinfo/getNeedToCompleteInfo',
        }),
        dialogSupplementVisible() {
            return this.$store.getters['global-dialog/getGlobalDialogVisible']('supplement');
        },
    },
    watch: {        
        //直接监听
        dialogSupplementVisible(newVal,oldVal) {
			//对数据执行操作
            if(newVal == false){
                this.$refs.list.queryData(true);
            }
		},
    },
    methods: {
        ...mapActions({
            openGlobalDialog: 'global-dialog/openGlobalDialog',
        }),
        /** 补充信息 */
        openDialogSupply() {
            this.$store.dispatch('userinfo/checkIsLogin', () => {
                this.openGlobalDialog({
                    name: 'supplement',
                });
            });
        },
        // 获取剩余服务数量
        getLatistPermissionNum () {
            this.$get(`${this.$store.state.api.tbUrl}/opportunity/getnums.json`, (data) => {
                this.permissionNum = data.total;

                this.$emit('update:permissionnum', data.total);
            });
        },
        //获取商机人脉 请求以后
        afterQuery(val) {
            this.getLatistPermissionNum();

            this.$emit('update:businessnum', val.total);
            this.$emit('update:possiblenum', val.res.params.possiblenum);

            this.setCzc(['商机人脉圈', '翻页' , '最新', val.current ,'businessContact-page-newestList']);
        },
        // 展示详情
        showDetail (val) {
            if(!this.isLogin){
                this.$store.dispatch('global-dialog/showLogin');
                return;
            }
          
            if (this.permissionNum > 0) {
                ShowConfirm('是否查看当前信息', 'warning', () => {
                    this.$post(
                        `${this.$store.state.api.tbUrl}/opportunity/usebusinessnums.json`,
                        {
                            objectguid: val.guid,
                            objectname: val.notice,
                            noticetype: val.noticetype,
                            dwtype: val.dwtype,
                            // productcode: 'QZSJTS',
                        },
                        function (data, res) {
                            this.num = data.surplus;

                            this.$emit('update:permissionnum', data.surplus);
                            
                            this.$set(this.tableData, val.index, data.info);
                                ShowMsg(res.msg, 'success');
                            }
                        );
                });
            } else {
                this.$alert('商机人脉查看 0 条，点击确定进行购买', {
                    confirmButtonText: '确定',
                    callback: (action) => {
                        this.$emit('needBuy');
                    },
                });
            }
        },
        //企业画像
        portraitsClick: function (data) {
            let routeData = this.$router.resolve({
                path: '/portraits',
                query: {
                    guid: data.companyid,
                    company: data.company,
                },
            });

            window.open(routeData.href, '_blank');
        },

        noticeClick: function (data) {
            this.openNotice(data.guid, data.noticetype ,true);
        },
    },
    created() {},
    mounted() {
        
    },
};
</script>

<style lang="scss" scoped>
@import '@css/var.scss';

.newest {
    min-height: 300px;
    .noDate {
        height: 500px;
        text-align: center;
        font-size: 16px;
        line-height: 20px;

        .noTop {
            width: 800px;
            margin: 50px auto;
            text-align: center;

            .noInner {
                margin: 10px 0;
                padding: 20px 0;
                width: 100%;
                height: 100px;
                // border: 1px dotted red;

                .hl{
                    color: $dangerColor;
                }

                .noSpan {
                    text-decoration: underline;
                    color: #1989fa;
                    cursor: pointer;
                    font-weight: 600;
                    margin-left: 1em;
                }
            }
        }
    }
}
</style>
